import React from 'react'
import ReactDOM from 'react-dom/client'
import { ThemeProvider } from 'styled-components'
// import App from './App_class'
// import App from './01_类组件和函数组件/App_func'
// import App from './02_生命周期/App.jsx'
// import App from './03_组件通信-子传父/App'
// import App from './04.案例练习/App'
// import App from './05_组件插槽/App'
// import App from './06_组件的作用域插槽/App'
// import App from './07_非父子组件通信-context/App'
// import App from './08_非父子组件通信-事件总线/App'
// import App from './09_setState的使用/App'
// import App from './10_render函数的优化/App'
// import App from './11_数据不可变的力量/App'
// import App from './12.ref获取DOM和组件/App'
// import App from './13_受控组件/App'
// import App from './14_高阶组件/App'
// import App from './15_React的Portials/App'
// import App from './16_Fragment/App'
// import App from './17_React的严格模式/App'
// import App from './18_React过度动画/App'
// import App from './18_React过度动画/02_SwitchTransition动画/App'
// import App from './18_React过度动画/03_TransitionGroup动画/App'
// import App from './19_React中的css/App'
// import App from './19_React中的css/03_React中less/App'
// import App from './19_React中的css/04_ReactCssInJS/App'
// import App from './19_React中的css/05_classname库/App'
import App from './20_redux/App'

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <React.StrictMode>
    <ThemeProvider theme={{ color: 'green', size: '50px' }}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
)

// ES6标签模板字符串
// 1.模板字符串普通使用
// const name = 'zs'
// const age = 12
// const str = `my name is ${name}`
// console.log(str)

// 2.标签模板字符串的使用
// function foo(...args) {
//   console.log(args)
// }

// foo('whyy', 'acb', 12)
// 动态的将``进行截取，然后依次传递给函数
// foo`my name is ${name}, age is ${age}`
